<template>
  <div style="background: #fff">
    <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="detail">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in detailInfo.images" :key="index">
          <img :src="item" />
        </van-swipe-item>
      </van-swipe>
      <div class="things_name">
        <span class="name">商品名称:{{ detailInfo.name }}</span>
        <span class="nowprice">现价:{{detailInfo.price}}</span>
        <del  v-if="detailInfo.agoprice">原价:{{detailInfo.agoprice}}</del>
      </div>
      <div class="things-detail">
        <p class="">浏览次数:{{ detailInfo.browsenum }}次</p>
        <p class="">已售出:{{ detailInfo.buynum }}件</p>
        <p class="">剩余:{{ detailInfo.num }}件</p>
      </div>
      <div class="info" v-html="detailInfo.detailinfo"></div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="wap-home-o" text="主页" />
      <van-goods-action-icon @click="$router.push('/cart')" icon="cart-o" text="购物车"
        :badge='$store.state.CartData.data.length ||"" ' />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="warning" @click="showDetail('add')" text="加入购物车" />
      <van-goods-action-button type="danger" @click="showDetail('buy')" text="立即购买" />
    </van-goods-action>
    <van-popup round v-model="show" closeable position="bottom" :style="{ height: '30%' }">
      <van-card :num="value" :price="detailInfo.price || ''" :title="detailInfo.name" :thumb="detailInfo.images[0]">
        <template #footer>
          <van-stepper v-model="value" />
        </template>
      </van-card>
      <van-button type="primary" size="large" @click="action">添加</van-button>
    </van-popup>
  </div>
</template>

<script>
// import { VueEditor } from 'vue2-editor/dist/vue2-editor.core.js'
import {
  getDetail, productHistory
} from '@api/home'
import {
  mapMutations
} from 'vuex'
export default {
  name: 'detail',
  data () {
    return {
      detailInfo: {
        images: []
      },
      show: false,
      value: 1,
      info: ''
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    productHistory () {
      var data = JSON.parse(JSON.stringify(this.detailInfo))
      delete data.detailinfo
      productHistory(data)
    },
    ...mapMutations('CartData', ['add_Item', 'add_ItemLs', 'Update_num', 'delete_ItemLs']),
    getDetail () {
      getDetail(this.$route.query.id).then((res) => {
        if (res.status === 200) {
          this.detailInfo = res.data.data
          this.detailInfo.images = this.detailInfo.imgs.split('||')
          if (localStorage.getItem('auth_token')) {
            this.productHistory()
          } else {
            console.log('login')
          }
        }
      })
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    showDetail (info) {
      this.info = info
      this.show = true
    },
    action () {
      if (this.info === 'add') {
        const isAdd = this.$store.state.CartData.data.findIndex(el => el.id === this.detailInfo.id)
        if (isAdd === -1) {
          this.add_Item({
            ...this.detailInfo,
            num: this.value,
            checked: false
          })
        } else {
          const num = this.value
          this.Update_num({
            isAdd,
            num
          })
        }
        this.$toast.success('添加成功')
      } else {
        this.detailInfo.wantBuy = this.value
        window.localStorage.setItem('ls', JSON.stringify(this.detailInfo))
        this.$router.push('/orderls')
      }
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~vue2-editor/dist/vue2-editor.css";
  .detail {
    margin-bottom: 50px;
    .things_name{
      margin: 10px;
      margin-left: 50px;
      .name{
        font-size: 20px;
      }
      .nowprice{
        margin-left: 10px;
      }
      del{
        color:red;
        margin-left: 10px;
      }
    }
    .things-detail{
        display: flex;
        justify-content: space-around;
      }
    p {
      font-size: 14px;
      margin-top: 10px;
    }
    .info{
      margin: auto;
      text-align: center;
      margin-top: 20px;
    }
    /deep/ img {
      margin: 0 auto;
      display: block;
      width: 300px;
      height: 300px;
    }
  }

  /deep/ .van-card {
    padding-top: 20px;
    height: 70%;
  }

  .van-stepper {
    margin-top: 2px;
    float: right;
  }
  /deep/.ql-align-center{
    text-align: center;
  }
</style>
